<template>
	<view class="home">
		<view class="header">
			<view class="black_1">
				<view class="left">
					<image :src="user.avatar"></image>
				</view>
				<view class="middle">
					<view class="line_1">
						{{user.nick_name}}
					</view>
					<view class="line_2" @click="copy(user.id)">
						邀请码：{{user.invite_code}}
						<image src="../../static/my/copy.png"></image>
					</view>
				</view>
				<view class="right"  @click='server(5)'>
					<image class="text" src="../../static/my/sehz.png" mode=""></image>
					<!-- <view class="text" @click="toOrder(5)">设置</view> -->
				</view>
			</view>

			<view class="black_2">
				<view class="left" @click="haveNum(0)">
					<view>{{Number(user.new_stock_account).toFixed(2)}}</view>
					<view class="text2">ZY数量</view>
				</view>
				<view class="right" @click="haveNum(1)">
					<view>{{Number(user.new_green_account).toFixed(2)}}</view>
					<view class="text2">绿色积分</view>
				</view>
			</view>
		</view>
		<view class="black_3">
			<view class="line_2">交易订单</view>
			<view class="line_1">
				<template v-for="(item,index) in orderTab">
					<view class="view" @click="toOrder(index)">
						<uni-badge class="uni-badge-left-margin" :text="item.num" absolute="rightTop" :offset="[-3, -3]"
							size="small">
							<view class="box">
								<image :src="item.src"></image>
								<text>{{item.name}}</text>
							</view>
						</uni-badge>
					</view>
				</template>
			</view>
		</view>

		<!-- <view class="black_4" v-if="user.is_auth==0">
			<view class="line_1">
				<image class="left" src="../../static/my/shiming.png">

				</image>
				<view class="middle">
					实名认证
				</view>

				<view class="right" @click="authentication()">
					去实名
				</view>
			</view>
		</view> -->

		<view class="black_5">
			<template v-for="(item,index) in serverTab">
				<view class="list-item" :class="index == 1? 'action':''" @click="server(index)">
					<image class="left" :src="item.src">
					</image>
					<view class="middle">
						{{item.name}}
					</view>
					<!-- <image class="right" src="../../static/go_to.png">
					</image> -->
				</view>
			</template>
		</view>
		
		
		<!-- <customer ref="pop_customer" :tell="kf_wx_number">

		</customer>
		<transfer ref="pop_transfer" :success="userInfo"></transfer>
		 -->
	</view>
</template>

<script>
	// import customer from '../../components/customer/customer.vue'
	// import transfer from '../../components/transfer/transfer.vue'

	export default {
		// components: {
		// 	customer,
		// 	transfer
		// },
		data() {
			return {
				kf_wx_number: "",
				user: {
					"mobile": "",
					        "nick_name": "",
					        "invite_code": "",
					        "id": 0,
					        "avatar": "",
					        "new_green_account": "",
					        "new_stock_account": ""
				},
				orderTab: [{
						name: "待付款",
						src: '../../static/my/order1.png',
						num: 0,
					},
					{
						name: "待收款",
						src: '../../static/my/order2.png',
						num: 0,
					},

					{
						name: "申诉中",
						src: '../../static/my/order3.png',
						num: 0,
					},
					{
						name: "已完成",
						src: '../../static/my/order4.png',
						num: 0,
					}
				],
				serverTab: [{
						name: "收款信息",
						src: '../../static/my/server_tab2.png'
					},{
						name: "我的团队",
						src: '../../static/my/server_tab1.png'
					}
					
					//,
					// {
					// 	name: "专属客服",
					// 	src: '../../static/my/server_tab3.png'
					// },
					// {
					// 	name: "邀请好友",
					// 	src: '../../static/my/server_tab4.png'
					// },
					// {
					// 	name: "收货地址",
					// 	src: '../../static/my/server_tab5.png'
					// },
					// {
					// 	name: "设置",
					// 	src: '../../static/my/server_tab6.png'
					// }
				],
			};

		},
		onShow() {
			this.kf_wx_number = uni.getStorageSync('contact_us');
			this.userInfo()
			this.myOrderCount()
		},
		methods: {
			myOrderCount() {
				var that = this;
				this.api.http.requests('exchange/myOrderCount', {}, res => {
					if(res.data){
						// var tab = that.orderTab 
						that.orderTab[0].num =  res.data.dfk_num
						that.orderTab[1].num = res.data.dsk_num
						that.orderTab[2].num = res.data.ssz_num
						// that.orderTab = tab
					}
				}, "POST")
			},
			userInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					if(res.data){
							that.user = res.data
							try{
								let index = that.user .new_green_account.indexOf('.')
								let index2 = that.user .new_stock_account.indexOf('.')
								that.user .new_green_account = that.user .new_green_account.slice(0,index+3)
								that.user .new_stock_account = that.user .new_stock_account.slice(0,index2+3)
							}catch(e){
								
							}
							uni.setStorageSync("userId",that.user.id)
					}
				
				}, "POST")
			},
			authentication() {
				uni.navigateTo({
					url: "../../pages/my/authentication"
				})
			},
			toOrder(index) {
				uni.navigateTo({
					url: "../../pages/trading/transactionList?type=" + (index + 1) + '&userId=' + this.user.id
				})
			},
			server(index) {
				console.log(index)
				switch (parseInt(index)) {
					case 0:
						uni.navigateTo({
							url: "../../pages/my/walletManagement"
						})
						break;
					case 1:
						
						uni.navigateTo({
							url: "../../pages/my/Myteam?userId=" + this.user.id
						})
						break;
					case 2:
						this.$refs.pop_customer.open()
						break;
					case 3:
					
						this.custom.tool.jump(0, 'my/share?pid=' + this.user.id);
						break;
					case 4:
						uni.navigateTo({
							url: "../../pages/address/index"
						})
						break;
					case 5:
						uni.navigateTo({
							url: "../../pages/my/setting"
						})
						break;
					case 6:
						break;
				}

			},
			haveNum(type) {
				console.log(type)
				// var llb =type == 1? this.user.new_stock_account:this.user.new_green_account
				this.custom.tool.jump(0, 'my/FlowDetails');
			},
			copy(text) {
				this.custom.tool.setClipboardText(''+text, res => {}, fial => {})
			},
			getAccounts(type) {
				var amount = '0.00'
				this.user.accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return amount
					}
				})
				return amount
			},
			transfer1(){
				this.$refs.pop_transfer.open()
			}
		}
	}
</script>
<style>
	page {
		background: #F6F6F6;
	}
</style>
<style lang="less">
	.header {
		background: url(../../static/my/my_bg.png) no-repeat;
		background-size: cover;

		.black_1 {
			padding-top: 48px;
			display: flex;
			padding-left: 20px;
			align-items: center;
			justify-content: space-between;

			.left {
				image {
					width: 73px;
					height: 73px;
					border-radius: 50%;
				}
			}

			.middle {
				flex: 1;
				margin-left: 10px;

				.line_1 {
					font-size: 20px;
					font-weight: 800;
					color: #3A3A3A;
				}

				.line_2 {
					margin-top: 5px;

					.text1 {
						font-size: 16px;
						font-weight: bold;
						color: #3A3A3A;
					}

					image {
						margin-left: 8px;
						width: 11px;
						height: 11px;
					}
				}

			}

			.right{
					margin-right: 10px;
					.text{
						width: 25px;
						height: 25px;
						// background-color: #587BE7;
						border-radius: 20px;
						color: white;
						padding: 5px 20px;
					}
			}
		}

		.black_2 {
			background: url(../../static/my/order_header_bg.png);
			background-size: 100% 100%;
			padding: 8px 0px;
			margin: 10px 10px 0px 10px;
			display: flex;
			justify-content: space-around;

			.left,
			.right {
				text-align: center;
				font-size: 26px;
				font-weight: 400;
				color: #FFFFFF;

				.text2 {
					margin-top: 5px;
					font-size: 14px;
				}
			}

		}
	}

	.black_3 {
		background-color: #FFFFFF;
		margin: 0px 10px;
		padding: 15px 5px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;

		.line_2 {
			font-size: 18px;
			font-weight: 800;
			color: #3A3A3A;
			margin-left: 10px;
		}

		.line_1 {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			color: #3A3A3A;

			.view {
				width: 25%;

				.box {
					text-align: center;

					image {
						margin: auto;
						display: block;
						width: 60rpx;
						height: 60rpx;
					}
				}

				.uni-badge-left-margin {
					z-index: 1;
				}
			}
		}
	}

	.black_4 {
		margin: 15px 10px 10px 10px;
		background: url(../../static/my/shiming_bg.png);
		background-size: 100% 100%;

		.line_1 {
			padding: 20px 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 29px;
				height: 25px;
			}

			.middle {
				font-size: 20px;
				font-weight: 400;
				color: #FFFFFF;
				flex: 2;
				margin-left: 10px;
			}

			.right {
				background-color: #FFFFFF;
				border-radius: 20px;
				padding: 5px 25px;
				font-size: 14px;
				font-weight: bold;
				color: #587BE7;
			}
		}
	}

	.black_5 {
		margin: 15px 10px 10px 10px;
		// background: #FFFFFF;
		border-radius: 12px 12px 12px 12px;
		padding: 5px;
		display: flex;
		justify-content: space-between;
		text-align: center;
		.list-item {
			flex: 1;
			margin: auto;
			padding:  20px 10px;
			background: linear-gradient(90deg, #FEE9E4 0%, #FEF8F7 100%);
			box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.08);
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			// display: flex;
			// justify-content: space-between;

			.left {
				margin: auto;
				width: 35px;
				height: 33px;
			}

			.middle {
				margin-top: 10px;
				flex: 2;
				font-size: 16px;
				font-weight: 400;
				color: #1A1A1A;
			}

			.right {
				margin: auto;
				width: 8px;
				height: 16px;
			}
		}
		.action{
			margin-left: 5px;
			background: linear-gradient(90deg, #EFF8FE 0%, #F6FCFF 100%);
		}

	}
</style>